<template>
	<div class="email-edit">
		<form>
			<div class="email-editor">
				<span>发件人</span>
				<span>{{$user.email}}</span>
			</div>
			<div class="email-recipient">
				<span>收件人:</span>
				<el-autocomplete
				  size="mini"
				  v-model="input.to"
				  :fetch-suggestions="querySearchAsync"
				  style="width: 80%"
				  @keyup.enter.native = "addTO"
				></el-autocomplete>
				<div class="email-tag-content">
					<el-tag
					  v-for="tag in form.to"
					  size="mini"
					  :key="tag"
					  closable>
					  {{tag}}
					</el-tag>
				</div>
			</div>
			<div class="email-copy">
				<span>抄送:</span>
				<el-autocomplete
				  size="mini"
				  v-model="input.cc"
				  :fetch-suggestions="querySearchAsync"
				  style="width: 80%"
				  @keyup.enter.native = "addCC"
				></el-autocomplete>
				<div class="email-tag-content">
					<el-tag
					  v-for="tag in form.cc"
					  size="mini"
					  :key="tag"
					  closable>
					  {{tag}}
					</el-tag>
				</div>
				
			</div>
			<div class="email-bcc">
				<span>密送:</span>
				<el-autocomplete
				  size="mini"
				  v-model="input.bcc"
				  :fetch-suggestions="querySearchAsync"
				  style="width: 80%"
				  @keyup.enter.native = "addBCC"
				></el-autocomplete>
				<div class="email-tag-content">
					<el-tag
					  v-for="tag in form.bcc"
					  size="mini"
					  :key="tag"
					  closable>
					  {{tag}}
					</el-tag>
				</div>
			</div>
			<div class="email-title">
				<span>主题:</span>
				<el-input size="mini" style="width: 80%" v-model="form.title"></el-input>
			</div>
			<div class="email-content">
				<span>正文:</span>
				<quill-editor 
			      v-model="form.content" 
			      ref="myQuillEditor" 
			      :options="editorOption" 
			      @change="onChange"
			      style="position: relative;top:-16px; margin-left:76px;width: 80%;height: 300px">
			      	<div id="toolbar" slot="toolbar">     
			      		<select class="ql-size" title="字体大小">
				          <option value="10px">10px</option>
				          <option value="12px" selected>12px</option>
				          <option value="14px">14px</option>
				          <option value="16px">16px</option>
				          <option value="18px">18px</option>
				          <option value="20px">20px</option>
				        </select>  
				        <select class="ql-font" title="字体">
				          <option value="SimSun" selected="selected"></option>
				          <option value="SimHei"></option>
				          <option value="Microsoft-YaHei"></option>
				          <option value="KaiTi"></option>
				          <option value="FangSong"></option>
				          <option value="Arial"></option>
				          <option value="Times-New-Roman"></option>
				          <option value="sans-serif"></option>
				        </select>      		
			      		<span class="ql-formats"><button type="button" class="ql-bold"></button></span>        
			      		<span class="ql-formats"><button type="button" class="ql-italic"></button></span>        
			      		<span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>        
			      		<span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>        
			      		<span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>        
			      		<span class="ql-formats"><button type="button" class="ql-link"></button></span>        
			      		<span class="ql-formats">        
			      			<button type="button" @click="imgClick" style="outline:none">        
				      			<svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> 
				      				<circle class="ql-fill" cx="6" cy="7" r="1"></circle> 
				      				<polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> 
				      			</svg>      	
				      		</button>      
				      	</span>      
				      	<span class="ql-formats"><button type="button" class="ql-video"></button></span>         	
				    </div>
   				</quill-editor>
			</div>
			<el-upload
			  class="email-upload"
			  action="/uploadFile"
			  :on-remove="handleRemove"
			  :before-remove="beforeRemove"
			  :on-success="handleSuccess"
			  multiple
			  :limit="8"
			  :on-exceed="handleExceed"
			  :file-list="form.fileList">
			  <el-button size="small" type="primary">点击上传</el-button>
			</el-upload>
		</form>

		<div class="email-oper-nav">
			<el-button v-on:click="sendEmail" size="small" type="primary">发送</el-button>
			<el-button size="small" type="primary">存草稿</el-button>
			<el-button size="small" type="primary">关闭</el-button>
		</div>
	</div>
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'
	import * as Quill from 'quill'
	var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
    var Font = Quill.import('formats/font');  
    Font.whitelist = fonts; //将字体加入到白名单 
    Quill.register(Font, true);
    let Size = Quill.import('attributors/style/size')
	Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
	Quill.register(Size, true)

	export default {
	  name: 'EmailEdit',
	  props:{	      
	  	value:{	        
	  		type:String	      
	  	},	      
	  	/*上传图片的地址*/	      
	  	uploadUrl:{	        
	  		type:String,	        
	  		default:'/uploadImg'	      
	  	},	      
	  	/*上传图片的file控件name*/	      
	  	fileName:{	        
	  		type:String,	        
	  		default: 'img'	      
	  	}	    
	  },
	  data () {
	    return {
	    	recipients:[],
	    	timeout:  null,
	    	input:{
	    		to:"",
	    		cc:"",
	    		bcc:"",
	    	},
	    	form:{
	    		editor:this.$user.email,
	    		title:"",
	    		to:[],
	    		cc:[],
	    		bcc:[],
	    		content:"",
	    		fileList:[],
	    	},
	    	editorOption:{
	    		modules:{
	    			toolbar:'#toolbar'
	    		}
	    	}
	    }
	  },
	  methods: {
	  	  onChange(){
	        this.$emit('input', this.form.content)
	      },
	      loadAll() {
	        return [
	          
	        ];
	      },
	      onFileChange(e){	        
	      	var self=this	
	      	var fileInput=e.target	        
	      	if(fileInput.files.length==0){	          
	      		return	        
	      	}	        
	      	this.editor.focus();
	      	if(fileInput.files[0].size>1024*1024*100){	          
	      		this.$alert('图片不能大于600KB', '图片尺寸过大', {	            
	      			confirmButtonText: '确定',	            
	      			type: 'warning',	          
	      		})	        
	      	}	        
	      	var data=new FormData	        
	      	data.append(this.fileName,fileInput.files[0])	        
	      	this.$ajax.post(this.uploadUrl,data).then(function(res){	          
	      		if(res.data) {	            
	      			self.editor.insertEmbed(self.editor.getSelection().index, 'image', res.data.filename)	          
	      		}	        
	      	})	      
	      },
	      imgClick() {	        
	      	if(!this.uploadUrl){	          
	      		console.log('no editor uploadUrl')	          
	      		return;	        
	      	}	        
	      	/*内存创建input file*/	        
	      	var input=document.createElement('input')	        
	      	input.type='file'	        
	      	input.name=this.fileName	        
	      	input.accept='image/jpeg,image/png,image/jpg,image/gif'	        
	      	input.onchange=this.onFileChange	        
	      	input.click()	      
	      },
	      querySearchAsync(queryString, cb) {
	        var recipients = this.recipients;
	        var results = queryString ? recipients.filter(this.createStateFilter(queryString)) : recipients;

	        clearTimeout(this.timeout);
	        this.timeout = setTimeout(() => {
	          cb(results);
	        }, 3000 * Math.random());
	      },
	      createStateFilter(queryString) {
	        return (state) => {
	          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	        };
	      },
	      onEditorChange({ editor, html, text }) {
		     this.content = html
		  },
		  addTO(){
		  	this.form.to.push(this.input.to);
		  	this.input.to = "";
		  },
		  addCC(){
		  	this.form.cc.push(this.input.cc);
		  	this.input.cc = "";
		  },
		  addBCC(){
		  	this.form.bcc.push(this.input.bcc);
		  	this.input.bcc = "";
		  },
		  handleRemove(file, fileList) {
	        this.form.fileList = fileList;
	      },
	      handleSuccess(response,file,fileList){
	      	this.form.fileList = fileList;
	      },
	      handleExceed(files, fileList) {
	        this.$message.warning(`当前限制选择 8 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	      },
	      beforeRemove(file, fileList) {
	        return this.$confirm(`确定移除 ${ file.name }？`);
	      },
	      sendEmail(){
	      	this.$ajax.post("http://localhost:8081/email/send",this.form).then((res)=>{
	      		console.info(res);
	      	}).catch((err)=>{
	      		console.log(err);
	      	})
	      }
	  },
	  mounted() {
      	this.recipients = this.loadAll();
      	this.form.content=this.value
      },
      created:function(){
      },
      computed:{
	      editor() {
	        return this.$refs.myQuillEditor.quill
	      }
	  },
      components:{
	    quillEditor
	  },
	  watch:{
	  	'value'(newVal, oldVal){
	  		if (this.editor) {
	          if (newVal !== this.content) {
	            this.content = newVal
	          }
	        }
	  	}
	  }
	}
</script>

<style scoped>
.email-edit{
	width: 800px;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 1px 2px 5px 1px #565656;
	font-size: 14px;
}
.email-edit>form>div{
	margin-bottom: 10px;
	position: relative;
}
.email-edit>form>div>span{
	width: 70px;
    display: inline-block;
}
.email-oper-nav{
	margin-top: 20px;
	height: 20px
}
.email-oper-nav button{
	float:right;
	margin-left: 15px;
}
.email-content{
	height: 335px;
}
.email-attchment{
	margin-left: 78px;
	text-decoration: underline;
	color:blue;
}
.email-tag-content{
	position: absolute;
    top: 4px;
    padding-left: 80px;
}
.email-upload{
	margin-left: 80px;
}
</style>